<template>
  <div >
    <el-row type="flex" justify="center" align="middle" class="login">
    <h1>登录页</h1>
    <el-form :model="form" label-width="80px">
    <el-form-item label="用户名">
   		<el-input v-model="form.username"></el-input>
	</el-form-item>

	<el-form-item label="密码">
    	<el-input  v-model="form.password" type="password"></el-input>
	</el-form-item>

	<el-form-item>
    	<el-button type="primary" @click="loginHandle">登录</el-button>
    	<el-button @click="resetHandle">重置</el-button>
	</el-form-item>
</el-form>
</el-row>
  </div>
</template>

<script>
import {userLogin} from '@/api'
import {setToken,setUserInfo} from '../utils/myToken'
export default {
   data () {
     return {
       form:{
         username:'10086',
       password:'123'
       }
     }
   },
   methods: {
     loginHandle(){
      //  解构表单中的用户名和密码
      const {username,password} =this.form
      // 校验表单判定是否为空
      if(!username || !password){
        return this.$message.error('请输入完整的信息')
      }
      // 2.登录用登录逻辑,给端口传入用户名和密码
      userLogin({username,password}).then((res)=>{
        console.log(res);
        if(res.data.data){
          // 从data中解构出token和user
          const {token,user}=res.data.data
          // 将token存储到本地
          setToken(token)
          // 将用户信息存储到本地
          setUserInfo(user)
          // 替换到首页
          this.$router.replace('/')
          // 成功提示
          this.$message.success('登录成功')
        }else{
          // 失败提示
          this.$message.error('登录失败')
        }

      })
     },
     resetHandle(){
       this.form={username:'',password:''}
     }
   }
}
</script>
<style lang="less" scoped>
.login {
  width: 500px;
  height: 500px;
  background-color: pink;
  flex-direction: column;
  // background: url(https://www.bing.com/th?id=OHR.FoucaultsPendulum_ZH-CN9435794626_1920x1080.jpg);
}
</style>